<template>
	<view class="share">
		<image mode="widthFix" class="share-bg" src="@/static/images/common/share-bg.png" />
		<image mode="widthFix" class="share-btn" src="@/static/images/common/share-btn.png" @tap="shareToPlat()"/>
		<view class="share-rules" @click="showRules">活动规则</view>
		<view class="front">
			<view class="share-title" @tap="startShare()">立即邀请</view>
			<view class="share-info">
				<image mode="widthFix" class="share-plot" src="@/static/images/common/share-plot.png" />
				<view class="share-profit">
					<view class="share-item">
						<text class="text">{{ registerNum }}<text class="small">人</text></text>
						已邀请
					</view>
					<view class="share-item line">
						<text class="text">{{ inviteNum }}<text class="small">人</text></text>
						有效用户
					</view>
					<view class="share-item line">
						<text class="text">{{ scoreNum }}</text>
						获得积分
					</view>
				</view>

				<template v-if="shareList.length > 0">
					<view class="friends-item" v-for="(item, index) in shareList" :key="index">
						<view class="left">
							<image mode="widthFix" class="avatar" :src="item.headUrl"></image>
							<text class="text">{{ item.nickName }}</text>
						</view>
						<text class="time">{{ item.createTime }}</text>
					</view>
				</template>
				<view class="share-empty" v-else>暂未邀请到好友</view>
			</view>
			<image mode="widthFix" class="share-course" src="@/static/images/common/share-course.png" />
		</view>
		
		<!-- 分享规则 -->
		<popup ref="shareRules" class="rules-opoup">
			<view class="main">
				<text class="iconfont icon-guanbi" @tap="$refs.shareRules.close();"></text>
				<text class="text">1、邀请好友下载并注册，且邀请的好友完成首单（0元购、百万补贴、新人专享、限时抢购不计入首单、付款金额大于5元），好友确认收货后即可获得5000积分</text>
				<text class="text">2、本活动与Apple Inc. 无关</text>
				<text class="text">本规则在法律允许范围内嗨返APP平台拥有最终解释权。</text>
			</view>
		</popup>
		
		<!-- 分享类型 -->
		<popup ref="shareType" class="share-type" type="bottom">
			<view class="main">
				<view class="type-btn link" @tap="getShareInfo()">分享链接</view>
				<view class="type-btn poster" @tap="getSharePoster()">
					分享海报
					<text class="iconfont icon-xiayiye"></text>
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
		</popup>
		
		<!-- 分享链接 -->
		<popup ref="sharePlat" class="share-plat" type="bottom">
			<view class="main">
				<view class="plat-item" @tap="shareToWeixin('WXSceneSession', 'link')">
					<image class="image wechat" src="@/static/images/goods/wechat.png" />
					<text class="text">微信好友</text>
				</view>
				<view class="plat-item" @tap="shareToWeixin('weixinTimeline', 'link')">
					<image class="image moments" src="@/static/images/goods/moments.png" />
					<text class="text">朋友圈</text>
				</view>
			</view>
		</popup>
		
		<!-- 分享海报 -->
		<popup ref="sharePoster" class="share-poster" type="bottom">
			<view class="main">
				<view class="poster" @tap="$refs.sharePoster.close()">
					<image class="image" :src="posterUrl" @load="loading = false"></image>
					<view class="loading" v-if="loading">
						<view class="load-item pink"></view>
						<view class="load-item red"></view>
						<view class="load-item orange"></view>
						<view class="load-item yell"></view>
					</view>
				</view>
				<view class="footer">
					<view class="plat-item" @tap="shareToWeixin('WXSceneSession', 'poster')">
						<image class="image wechat" src="@/static/images/goods/wechat.png" />
						<text class="text">微信好友</text>
					</view>
					<view class="plat-item" @tap="shareToWeixin('weixinTimeline', 'poster')">
						<image class="image moments" src="@/static/images/goods/moments.png" />
						<text class="text">朋友圈</text>
					</view>
					<view class="plat-item" @tap="savePicture">
						<image class="image save" src="@/static/images/goods/save.png" />
						<text class="text">保存本地</text>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import moment from '@/utils/packges/moment'
	import Popup from '@/components/uni/Popup'
	export default {
		components: {
			Popup
		},
		data() {
			return {
				shareList: [],
				inviteNum: 0,
				registerNum: 0,
				scoreNum: 0,
				shareInfo: [],
				posterUrl: null,
				loading: false
			};
		},

		onShow() {
			this.getScoreCount();
		},

		methods: {
			// 获取邀请统计
			getScoreCount() {
				this.$service.integral.score.count().then(res => {
					this.inviteNum = res.inviteNum;
					this.scoreNum = res.scoreNum;
					this.registerNum = res.registerNum || 0;
					this.shareList = res.list;
					this.shareList.forEach(item => {
						item.createTime = moment(item.createTime  * 1000).format('YYYY-MM-DD HH:mm:ss')
					})
				})
			},
			showRules() {
				this.$refs.shareRules.open();
			},
			startShare() {
				this.$service.common.userHf.immediateInvitation().then(res => {
					this.shareInfo = res;
					this.$refs.shareType.open();
				})
			},
			getShareInfo() {
				this.$refs.shareType.close();
				this.$refs.sharePlat.open();
			},
			getSharePoster() {
				this.$refs.shareType.close();
				// 获取邀请海报
				this.$service.shopping.shareTemplate.sharePoster({
					qrCodeLink: this.shareInfo[0].url
				}).then(res => {
					this.posterUrl = res;
					this.loading = true;
					this.$refs.sharePoster.open();
				}).catch(() => {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				})
			},
			shareToWeixin(platform, shareType) {
				// 链接分享
				if (shareType === 'link') {
					if (platform === 'WXSceneSession') {
						uni.share({
						    provider: "weixin",
						    scene: platform,
						    type: 0,
						    href: this.shareInfo[0].url,
						    title: this.shareInfo[0].title,
						    summary: this.shareInfo[0].subtitle,
						    imageUrl: this.shareInfo[0].imgUrl,
						    success: function (res) {
								uni.showToast({
									title: '分享成功',
									icon: 'none'
								})
						    },
						    fail: function (err) {
						        uni.showToast({
						        	title: '分享失败',
						        	icon: 'none'
						        })
						    }
						});
					} else {
						uni.share({
						    provider: "weixin",
						    scene: platform,
						    type: 0,
						    href: this.shareInfo[1].url,
						    title: this.shareInfo[1].title,
						    summary: this.shareInfo[1].subtitle,
						    imageUrl: this.shareInfo[1].imgUrl,
						    success: function (res) {
								uni.showToast({
									title: '分享成功',
									icon: 'none'
								})
						    },
						    fail: function (err) {
						        uni.showToast({
						        	title: '分享失败',
						        	icon: 'none'
						        })
						    }
						});
					}
				} else {
					if (platform === 'WXSceneSession') {
						uni.share({
						    provider: "weixin",
						    scene: "WXSceneSession",
						    type: 2,
							imageUrl: this.posterUrl,
						    success: function (res) {
								uni.showToast({
									title: '分享成功',
									icon: 'none'
								})
						    },
						    fail: function (err) {
								uni.showToast({
									title: '分享失败',
									icon: 'none'
								})
						    }
						});
					} else {
						uni.share({
						    provider: "weixin",
						    scene: "WXSenceTimeline",
						    type: 2,
						    imageUrl: this.posterUrl,
						    success: function (res) {
						        uni.showToast({
						       	    title: '分享成功',
						       	    icon: 'none'
						        })
						    },
						    fail: function (err) {
						        uni.showToast({
						        	title: '分享失败',
						        	icon: 'none'
						        })
						    }
						});
					}
				}
			},
			// 保存图片到本地
			savePicture() {
				uni.downloadFile({
				    url: this.posterUrl,
				    success: (res) =>{
				        if (res.statusCode === 200){
				            uni.saveImageToPhotosAlbum({
				                filePath: res.tempFilePath,
				                success: function() {
				                    uni.showToast({
				                        title: "图片已保存",
				                        icon: "none"
				                    });
				                },
				                fail: function() {
				                    uni.showToast({
				                        title: "保存失败",
				                        icon: "none"
				                    });
				                }
				            });
				        } 
				    }
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.share {
		min-height: 100vh;
		background: #fd2352;
		position: relative;

		.share-bg {
			width: 100%;
			position: absolute;
		}

		.share-btn {
			position: absolute;
			top: 290rpx;
			left: 50%;
			margin-left: -182rpx;
			width: 364rpx;
		}

		.share-rules {
			position: absolute;
			right: 0;
			top: 50rpx;
			background: #fff;
			padding: 6rpx 20rpx 6rpx 30rpx;
			color: #FF1745;
			font-size: 24rpx;
			border-radius: 50rpx 0 0 50rpx;
			z-index: 100;
		}

		.front {
			position: relative;
			padding: 320rpx 24rpx 0;

			.share-title {
				color: #A41402;
				font-size: 36rpx;
				width: 100%;
				text-align: center;
			}

			.share-info {
				width: 100%;
				margin-top: 100rpx;
				padding: 10rpx 20rpx 0 20rpx;
				min-height: 296rpx;
				border-radius: 16rpx;
				background: #fff;
				position: relative;

				.share-plot {
					width: 278rpx;
					position: absolute;
					left: 50%;
					top: -28rpx;
					margin-left: -139rpx;
				}

				.share-profit {
					margin-top: 60rpx;
					border-bottom: 2rpx solid #FFBBC0;
					padding-bottom: 30rpx;
					@include flexBox(space-between);

					.share-item {
						width: 50%;
						font-size: 28rpx;
						color: #616161;
						@include flexBox(center, center, column);

						.text {
							color: #E60011;
							font-size: 48rpx;

							.small {
								font-size: 28rpx;
							}
						}

						&.line {
							border-left: 2rpx solid #FFBBC0;
						}
					}
				}

				.friends-item {
					padding: 20rpx 0;
					@include flexBox(space-between, center);

					.left {
						@include flexBox(null, center);
						color: #616161;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
						}
					}

					.time {
						color: #616161;
					}
				}

				.share-empty {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #616161;
					line-height: 80rpx;
				}
			}

			.share-course {
				width: 100%;
				margin-top: 30rpx;
			}
		}
	}

	.rules-opoup {
		.main {
			width: 600rpx;
			background: #fff;
			padding: 60rpx 30rpx 30rpx;
			border-radius: 16rpx;
			position: relative;
			color: #616161;
			@include flexBox(null, null, column)
			.text {
				margin-bottom: 20rpx;
			}
			.iconfont {
				position: absolute;
				right: 20rpx;
				top: 6rpx;
			}
		}
	}
	.share-type {
		.main {
			background: rgba(0, 0, 0, 0.65);
			width: 100%;
			height: 172rpx;
			@include flexBox(space-around, center);
			.type-btn {
				line-height: 82rpx;
				font-size: 28rpx;
				text-align: center;
				border-radius: 50rpx;
				font-weight: 600;
				&.link {
					background: #EAC851;
					width: 258rpx;
				}
				&.poster {
					background: #FF2351;
					width: 354rpx;
					color: #fff;
					padding-left: 24rpx;
					.iconfont {
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.share-plat {
		.main {
			background: #fff;
			width: 100%;
			height: 200rpx;
			@include flexBox(space-around, center);
			.plat-item {
				@include flexBox(center, center, column);
				.image {
					margin-bottom: 10rpx;
				}
				.wechat {
					width: 60rpx;
					height: 50rpx;
				}
				.moments {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.share-poster {
		.main {
			width: 100%;
			height: 100vh;
			@include flexBox(space-between, null, column);
			.poster {
				flex: 1;
				position: relative;
				@include flexBox(center, center);
				.image {
					width: 620rpx;
					height: 920rpx;
				}
				.loading {
					position: absolute;
					width: 100%;
					height: 100%;
					@include flexBox(center)
					.load-item {
						width: 20rpx;
						height: 100rpx;
						margin: 0 10rpx;
						border-radius: 50rpx;
						&.pink {
							background: #fb889b;
							animation: pink 0.8s infinite;
						}
						&.red {
							background: #fb8888;
							animation: red 0.8s infinite;
						}
						&.orange {
							background: #fba488;
							animation: orange 0.8s infinite;
						}
						&.yell {
							background: #fbc188;
							animation: yell 0.8s infinite;
						}
					}
				}
			}
			.footer {
				width: 100%;
				height: 172rpx;
				background: #fff;
				@include flexBox(space-around, center);
				.plat-item {
					@include flexBox(center, center, column);
					.image {
						margin-bottom: 10rpx;
					}
					.wechat {
						width: 60rpx;
						height: 50rpx;
					}
					.moments {
						width: 50rpx;
						height: 50rpx;
					}
					.save {
						width: 48rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
	@keyframes pink {
		0% {
			margin-top: -16rpx;
		}
	
		50% {
			margin-top: 16rpx;
		}
	
		100% {
			margin-top: -16rpx;
		}
	}
	@keyframes red {
		0% {
			margin-top: 16rpx;
		}
	
		50% {
			margin-top: -16rpx;
		}
	
		100% {
			margin-top: 16rpx;
		}
	}
	@keyframes orange {
		0% {
			margin-top: -16rpx;
		}
	
		50% {
			margin-top: 16rpx;
		}
	
		100% {
			margin-top: -16rpx;
		}
	}
	@keyframes yell {
		0% {
			margin-top: 16rpx;
		}
	
		50% {
			margin-top: -16rpx;
		}
	
		100% {
			margin-top: 16rpx;
		}
	}
</style>
